<style>
    #febs-user-profile #user-img img {
        width: 7rem;
        margin: 1rem;
        border-radius: 50%;
        cursor: pointer;
    }

    #febs-user-profile #user-info {
        width: calc(100% - 145px);
    }

    #febs-user-profile #options-wrapper {
        text-align: center;
        margin-top: .5rem;
    }

    #febs-user-profile #update-user-info {
        cursor: pointer;
        margin-left: -1rem;
    }

    #febs-user-profile #options-wrapper a {
        padding: 4px 6px;
        color: rgba(0, 0, 0, 0.65);
        border: 1px solid #d9d9d9;
        border-radius: 2px;
    }

    #febs-user-profile #options-wrapper a:hover {
        color: #40a9ff;
        border-color: #40a9ff;
    }

    #febs-user-profile .layui-form-item {
        margin-bottom: 0;
    }
    #febs-user-profile #user-info .layui-form-label{
        width: 120px;
    }
    #febs-user-profile #user-info .layui-input-block{
       /*margin-left: 160px;*/
    }

</style>
<div class="febs-container"  id="febs-user-profile">
    <div class="febs-body layui-fluid" lay-title="个人中心">
        <div class="layui-row layui-col-space8 febs-full" style="margin: 0 -4px;">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md7 layui-col-lg7 febs-full" style="padding: 0px 4px;">
                <div class="layui-card febs-full">
                    <div class="layui-card-body">
                        <fieldset class="layui-elem-field">
                            <legend>个人信息</legend>
                            <div class="layui-field-box">
                                <div id="user-profile" style="display: flex;">
                                    <div id="user-img" style="flex: 150px;">
                                        <img alt="头像" title="点我更换头像" data-th-src="@{febs/images/avatar/empty.jpg}">
                                        <div id="options-wrapper">
                                            <div id="update-user-info">
                                                <a>
                                                    <span class="layui-icon layui-icon-setting"></span>
                                                    编辑资料
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <script type="text/html" template>
                                        <div id="user-info" class="layui-row">
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-user"></span> 登录账户：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.uname}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-note"></span> 用户工号：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.userNo?currentUser.userNo:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-solution"></span> 用户姓名：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.uname?currentUser.uname:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-idcard"></span> 身份证号：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.identificationNo?currentUser.identificationNo:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-home"></span> 所属机构：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.deptName?currentUser.deptName:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-audit"></span> 所属岗位：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.postName?currentUser.postName:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-skin"></span> 用户性别：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{# if(currentUser.sex === '0'){ }}
                                                    男
                                                    {{# } }}
                                                    {{# if(currentUser.sex === '1'){ }}
                                                    女
                                                    {{# } }}
                                                    {{# if(currentUser.sex === '2'){ }}
                                                    保密
                                                    {{# } }}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-date"></span> 入司日期：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.joinDate?currentUser.joinDate:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-phone"></span> 手机号码：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.mobile?currentUser.mobile:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md6 layui-col-lg6">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-mail"></span> 联系邮箱：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.email?currentUser.email:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md12 layui-col-lg12">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-idcard"></span> 用户角色：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.roleName?currentUser.roleName:'--'}}
                                                </div>
                                            </div>
                                            {{# if(currentUser.userType === '2') { }}
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md12 layui-col-lg12">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-home"></span> 所属承包方：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.contractorName?currentUser.contractorName:'--'}}
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-xs12 layui-col-md12 layui-col-lg12">
                                                <label class="layui-form-label layui-form-label-detail">
                                                    <span class="layui-icon layui-icon-team"></span> 所属承包队：
                                                </label>
                                                <div class="layui-input-block layui-input-block-html">
                                                    {{currentUser.teamName?currentUser.teamName:'--'}}
                                                </div>
                                            </div>
                                               {{# } }}
                                           </div>
                                        </div>
                                    </script>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>安全旅程</legend>
                            <div class="layui-field-box">
                                <script type="text/html" template>
                                    <div class="layui-row">
                                        <div class="layui-col-sm12 layui-col-xs12 layui-col-md12 layui-col-lg12">
                                            <label class="layui-form-label layui-form-label-detail">
                                                <span class="layui-icon "></span> 安全积分：
                                            </label>
                                            <div class="layui-input-block layui-input-block-html">
                                                {{currentUser.totalScore?currentUser.totalScore:'--'}}
                                            </div>
                                        </div>
                                    </div>
                                </script>
                            </div>
                        </fieldset>
                    </div>

                </div>
            </div >
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md5 layui-col-lg5  febs-full" style="padding: 0px 4px;">
                <div class="layui-card febs-full">
                    <div class="layui-card-header">系统配置</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="" lay-filter="system-setting-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: auto">侧边栏风格：</label>
                                <div class="layui-input-block" style="padding-top: 7px;">
                                    <input type="radio" name="theme" lay-filter="theme" value="black" checked="" title="深邃">
                                    <input type="radio" name="theme" lay-filter="theme" value="white" title="明亮">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: auto">选项卡开关：</label>
                                <div class="layui-input-block" style="padding-top: 7px;">
                                    <input type="radio" name="isTab" lay-filter="tab" value="1" checked="" title="开启">
                                    <input type="radio" name="isTab" lay-filter="tab" value="0" title="关闭">
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center;">
                                <button class="layui-btn" lay-submit="" lay-filter="system-setting-form-submit"
                                        id="submit-form">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    layui.use(['jquery', 'form', 'febs'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            _currentData = {
                theme: currentUser.theme,
                isTab: currentUser.isTab
            },
            $view = $('#febs-user-profile');

        form.render();
        initSettings();

        $view.find('#user-img img').attr('src', ctx + "febs/images/avatar/" + currentUser.avatar);
        $view.on('click', '#update-user-info', function () {
            febs.modal.open('个人信息修改', 'user/profile/update', {
                area: [$(window).width() <= 750 ? '90%' : '50%','650px'],
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    $('#profile-update').find('#submit').trigger('click');
                },
                btn2: function () {
                    layer.closeAll();
                },
                data: {
                }
            });
        });

        $view.on('click', '#user-profile img', function () {
            febs.modal.view('点击更换', 'user/avatar', {
                area: $(window).width() <= 750 ? '90%' : '650px',
                offset: '100px'
            });
        });

        $view.on('click', '#submit', function () {
            $view.find('#submit-form').trigger('click');
        });

        function initSettings() {
            form.val("system-setting-form", _currentData);
        }

        form.on("radio(theme)", function (data) {
            var $sidebar = $('#app-sidebar');
            if (data.value === 'black') {
                $sidebar.removeClass('febs-theme-white');
            }
            if (data.value === 'white') {
                $sidebar.addClass('febs-theme-white');
            }
        });

        form.on('submit(system-setting-form-submit)', function (data) {
            if (febs.nativeEqual(data.field, _currentData)) {
                febs.alert.warn('数据未作任何修改');
                return false;
            }
            febs.post(ctx + 'user/theme/update', data.field, function () {
                _currentData = data.field;
                febs.modal.confirm('修改成功','是否马上刷新页面生效？',function () {
                    window.location.reload();
                });
            });
            return false;
        });


    })
</script>